<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title>番剧播放界面</title>
		<script>
			function _go(situation){
				let fid = $("span[name=2]").attr("id");
				let uid = $("span[name=1]").attr("id");
				location = "/"+situation+"/"+fid+"/"+uid;
			}
			function _go1(){
				let text = $("#text").val();
				let fid = $("span[name=2]").attr("id");
				let uid = $("span[name=1]").attr("id");
				location = "/insertBarrage/"+fid+"/"+uid+"/"+text;
			}
		</script>
		
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		
		<!--引入Bootstrap CSS-->
		<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
		
		<style>
			.user{
				width:30px;
				height:30px;
				border-radius: 50%;
				border: #000000 1px solid;
			}
		</style>
		
	</head>
	<body>
		<!--导航栏开始-->
		<iframe th:src="@{/navigation/navigationBar.html}"
				frameBorder="0" width="100%" scrolling="no" height="70px"></iframe>
		<!--导航栏结束-->
		
		<!--播放界面+选集开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row justify-content-md-center">
					<div class="col-8 ">
						<div class="card text-white">
							<img th:src="@{/img/bocar.gif}" class="card-img" height="450px" alt="...">
						</div>
						<hr />
<!--						<a th:if="${isZan=='true'}" th:href="@{/cancelZan/}+${fan.fid}+@{/}+${session.uid}">取消点赞</a>-->
<!--						<a th:unless="${isZan}" th:href="@{/updateZan/}+${fan.fid}+@{/}+${session.uid}">可以点赞</a>-->
						<span th:id="${session.uid}" th:name="1"/>
						<span th:id="${fan.fid}" th:name="2"/>
						<button type="button" class="btn btn-outline-info" th:onclick="|javascript:_go('cancelZan')|" th:if="${isZan=='true'}">取消点赞[[${fan.zan}]]</button>
						<button type="button" class="btn btn-outline-info" th:onclick="|javascript:_go('updateZan')|" th:unless="${isZan=='true'}">点赞[[${fan.zan}]]</button>
						<button type="button" class="btn btn-outline-info" th:if="${isBi=='true'}">已投币[[${fan.bi}]]</button>
						<button type="button" class="btn btn-outline-info" th:onclick="|javascript:_go('updateBi')|" th:unless="${isBi=='true'}">投币[[${fan.bi}]]</button>
						<button type="button" class="btn btn-outline-info" th:onclick="|javascript:_go('cancelZhui')|" th:if="${isZhui=='true'}">取消追番</button>
						<button type="button" class="btn btn-outline-info" th:onclick="|javascript:_go('updateZhui')|" th:unless="${isZhui}">追番</button>
<!--						<button type="button" class="btn btn-outline-info"></button>-->
					</div>
					<div class="col-4">
						<div class="card w-100">
						  <div class="card-header">
						    选集
						  </div>
						  <div class="card-body">
							  <!--
						    <h5 class="card-title">Special title treatment</h5>
						    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
							-->
							  <span th:with="episodes=${fan.episodes}">
								  <span th:if="${episodes<10}">
									  <span th:each="i:${#numbers.sequence(1,episodes)}">
										  <a href="#" class="btn btn-primary mt-1 py-2">0[[${i}]]</a>
								      </span>
								  </span>
								  <span th:unless="${episodes<10}">
									  <span th:each="i:${#numbers.sequence(1,9)}">
										<a href="#" class="btn btn-primary mt-1 py-2">0[[${i}]]</a>
									  </span>
									  <span th:each="i:${#numbers.sequence(10,episodes)}">
										<a href="#" class="btn btn-primary mt-1 py-2">[[${i}]]</a>
									  </span>
								  </span>
							  </span>
<!--						    <a href="#" class="btn btn-primary mt-1 py-2">01</a>-->
						  </div>
						</div>
					</div>
					
				</div>
				
			</div>
			
		</section>
		<!--播放界面+选集结束-->
		
		<!--介绍开始-->
		<section class="mt-4">
			<div class="container">
				<hr />
				<div class="card mb-3 border-0">
				  <div class="row no-gutters">
					<div class="col-1"></div>
				    <div class="col-md-2">
				      <img th:src="@{/s_img/}+${fan.fid}+@{.png}" class="card-img"  style="height: 250px;width: 180px" alt="...">
				    </div>
				    <div class="col-md-9">
				      <div class="card-body">
				        <a th:href="@{/findFanByFname2/}+${fan.fid}"><h5 class="card-title" th:text="${fan.fname}"></h5></a>
				        <p class="card-text" th:text="${fan.description}"></p>
				        <p class="card-text"><small class="text-muted">全[[${fan.episodes}]]话</small>
							<small class="text-muted">[[${fan.totalamount}]]播放</small>
							<small class="text-muted">[[${fan.fans}]]追番</small></p>
						<p>评分: <big  class="text-warning" th:text="${fan.grade}"></big></p>
				      </div>
				    </div>
				  </div>
				</div>
				<hr />
			</div>
		</section>
		
		<!--介绍结束-->
		
		<!--评论区+相关推荐开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row justify-content-md-center">
					<div class="col-7 ">
						<!--发表评论开始-->
						<div class="card mb-3 border-0">
						  <div class="row no-gutters">
						    <div class="col-md-3">
						      <img th:src="@{/img/logo.png}" class="card-img " alt="...">
						    </div>
						    <div class="col-md-9">
						      <div class="card-body">
								  <form>
									  <div class="row">
									  	<textarea class="form-control d-inline-block" placeholder="发表一条友善的评论吧" th:id="text"></textarea>
										<button type="button" class="btn btn-primary mt-4" th:onclick="|javascript:_go1()|">发表评论</button>
<!--									  	<input class="btn btn-primary mt-4" type="submit" value="发表评论">-->
									  </div>
								  </form>
						      </div>
						    </div>
						  </div>
						</div>
						<hr />
						<!--发表评论结束-->
						
						<!--查看评论开始-->
						<img th:src="@{/img/comment.jpg}" th:if="${allBarrage.isEmpty()}" th:width="620px"/>
						<span th:each="barrageItem,itemStat:${allBarrage}">
							<span th:if="${itemStat.count<4}">
								<div class="card mb-3 border-0">
								  <div class="row no-gutters">
									<div class="col-md-3">
									  <img th:src="@{/img/logo.png}" class="card-img" alt="...">
									</div>
									<div class="col-md-9">
									  <div class="card-body">
										  <div class="card-title text-warning">
											  [[${barrageItem.nickname}]]
										  </div>
										  <div class="card-text">
											<p>[[${barrageItem.barrage}]]</p>
											<p class="card-text"><small th:text="${barrageItem.date}" class="text-muted"></small></p>
										  </div>
									  </div>
									</div>
								  </div>
								</div>
								<hr />
							</span>

						</span>
						<hr />
						<!--查看评论结束-->
					</div>
					

					<div class="col-3 ml-4">
						<!--卡片组开始-->
						<h5>相关推荐</h5>

						<div class="card mb-3" style="height: 180px;width: 370px">
						  <div class="row no-gutters">
						    <div class="col-md-5">
						      <img th:src="@{/img/fan01.png}" class="card-img" style="height: 175px" alt="...">
						    </div>
						    <div class="col-md-7">
						      <div class="card-body">
						        <h6 class="card-title">在地下城寻求邂逅是否搞错了什么 </h6>

						        <p class="card-text"><small class="text-muted">全13话</small></p>
								<p class="card-text"><small class="text-muted">816.9万播放·9.3万弹幕</small></p>
						      </div>
						    </div>
						  </div>
						</div>

						<div class="card mb-3" style="height: 180px;width: 370px">
						  <div class="row no-gutters">
						    <div class="col-md-5">
						      <img th:src="@{/img/fan02.png}" class="card-img" style="height: 175px" alt="...">
						    </div>
						    <div class="col-md-7">
						      <div class="card-body">
						        <h6 class="card-title">在地下城寻求邂逅是否搞错了什么 第二季</h6>
						        <p class="card-text"></p>
						        <p class="card-text"><small class="text-muted">全13话</small></p>
								<p class="card-text"><small class="text-muted">4703.5万播放·67万弹幕</small></p>
						      </div>
						    </div>
						  </div>
						</div>

						<div class="card mb-3" style="height: 180px;width: 370px">
						  <div class="row no-gutters">
						    <div class="col-md-5">
						      <img th:src="@{/img/fan03.png}" class="card-img" style="height: 175px" alt="...">
						    </div>
						    <div class="col-md-7">
						      <div class="card-body">
						        <h6 class="card-title">在地下城寻求邂逅是否搞错了什么 第三季 </h6>
						        <p class="card-text"></p>
						        <p class="card-text"><small class="text-muted">全12话</small></p>
								<p class="card-text"><small class="text-muted">2451.4万播放·18万弹幕</small></p>
						      </div>
						    </div>
						  </div>
						</div>
						<!--卡片组结束-->
					</div>
					<!--相关推荐开始-->
				</div>
			</div>
		</section>
		<!--评论区+相关推荐结束-->
		
		<!--引入 JavaScript文件和jQuery-->
		<!--引入顺序：jQuery，然后Popper.js，然后Bootstrap.js-->
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/bootstrap.bundle.js}"></script>
		
	</body>
</html>
